<template>
  <div class="ftf-rolling-page">
    <header></header>
    <div class="comment" :class="{fixed: isFix}">
    </div>
    <div v-if="isFix" style="height: 40px;width: 100%"></div>
    <div class="goods">
      <div class="menu-wrapper" ref="menuWrapper">
        <ul>
          <li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}"
              @click="selectMenu(index,$event)" ref="menuList">
          <span class="text border-1px">
            <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
                    </span>
          </li>
        </ul>
      </div>
      <div class="foods-wrapper" ref="foodsWrapper">
        <ul>
          <li v-for="item in goods" class="food-list" ref="foodList">
            <h1 class="title">{{item.name}}</h1>
            <ul>
              <li @click="selectFood(food,$event)" v-for="food in item.foods"
                  class="food-item border-1px">
                <div class="icon">
                  <img width="57" height="57" :src="food.icon">
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import productContent from './productContent';
  export default {
    name:'',
    data(){
      return {
        message: 'Hello Vue!',
        listHeight: [],
        scrollY: 0,
        documentY: 0,
        selectedFood: {},
        classMap: [],
        isFix: false,
        goods:productContent.isCreate()
      }
    },
    watch: {
      documentY: function(val, oldVal) {
        if (this.documentY > 200) {
          this.isFix = true;
        } else {
          this.isFix = false;
        }
      }
    },
    computed: {
      screenHeight: function () {
        return window.innerHeight
      },
      currentIndex() {
        for (let i = 0; i < this.listHeight.length; i++) {
          let height1 = this.listHeight[i];
          let height2 = this.listHeight[i + 1];
          if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
            this._followScroll(i);
            return i;
          }
        }
        return 0;
      },
      selectFoods() {
        let foods = [];
        this.goods.forEach((good) => {
          good.foods.forEach((food) => {
            if (food.count) {
              foods.push(food);
            }
          });
        });
        return foods;
      }
    },
    methods: {
      selectMenu(index, event) {
        if (!event._constructed) {
          return;
        }
        let foodList = this.$refs.foodList;
        let el = foodList[index];
        this.foodsScroll.scrollToElement(el, 300);
      },
      selectFood(food, event) {
        if (!event._constructed) {
          return;
        }
        this.selectedFood = food;
        this.$refs.food.show();
      },
      addFood(target) {
        this._drop(target);
      },
      _drop(target) {
        // 体验优化,异步执行下落动画
        this.$nextTick(() => {
          this.$refs.shopcart.drop(target);
        });
      },
      _initScroll() {
        /* eslint-disable */
        this.meunScroll = new BScroll(this.$refs.menuWrapper, {
          click: true
        });
        /* eslint-disable */
        this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
          click: true,
          probeType: 3
        });
        this.foodsScroll.on('scroll', (pos) => {
          // 判断滑动方向，避免下拉时分类高亮错误（如第一分类商品数量为1时，下拉使得第二分类高亮）
//          解决划动震荡BUG
          if (Math.round(pos.y) < 0){
            this.scrollY = Math.abs(Math.round(pos.y));
            console.log(this.scrollY)
//            解决左栏上划太多BUG
            if (this.scrollY < 400 ){
//              解决手机上面无法上划BUG
              window.scrollTo(0, this.scrollY / 2)
            }
            this.documentY = this.scrollY / 2;
          }
        });
      },
      _calculateHeight() {
        let foodList = this.$refs.foodList;
        let height = 0;
        this.listHeight.push(height);
        for (let i = 0; i < foodList.length; i++) {
          let item = foodList[i];
          height += item.clientHeight;
          this.listHeight.push(height);
        }
      },
      _followScroll(index) {
        let menuList = this.$refs.menuList;
        let el = menuList[index];
        this.meunScroll.scrollToElement(el, 300, 0, -100);
      }
    },
    mounted() {
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
      this._initScroll();
      this._calculateHeight();
    }
  }
</script>
<style lang='scss' rel='stylesheet/scss' scoped=''>
  header {
    height: 200px;
    background-color: green;
  }
  .comment {
    height: 40px;
    background-color: yellow;
  }
  .comment.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
  }
  .goods {
    display: flex;
    width: 100%;
    overflow: hidden;
    height: 667px;
  }
  .menu-wrapper {
    flex: 0 0 80px;
    width: 80px;
    background: #f3f5f7;

  }
  .menu-item {
    display: table;
    height: 54px;
    width: 80px;
    padding: 0 12px;
    line-height: 14px;

  }
  .menu-item.current {
    position: relative;
    z-index: 10;
    margin-top: -1px;
    background: #fff;
    font-weight: 700;

  }

  .text {
  }
  .text {
    display: table-cell;
    width: 56px;
    vertical-align: middle;
  }
  .foods-wrapper {
    flex: 1;
  }
  .title {
    padding-left: 14px;
    height: 26px;
    line-height: 26px;
    border-left: 2px solid #d9dde1;
    font-size: 12px;
    color: rgb(147, 153, 159);
    background: #f3f5f7;
  }
  .food-item {
    display: flex;
    flex-direction: row;
    margin: 18px;
    /*padding-bottom: 18px;*/
    border-bottom: 1px solid #666;
    height: 80px;
    align-items: center;
  }
  .content {
    flex: 1
  }
  .cartcontrol-wrapper {
    position: absolute;
    right: 0;
    bottom: 12px;;
  }
</style>
